<template>
    <!-- <el-button type="default" size="mini" @click="model = true">打开弹出框</el-button> -->
    <vol-box :lazy="true" v-model="model" title="选择设备" :height="100" :width="1100" :padding="5"
        :onModelClose="onModelClose">
        <div>
            <sbbm ref="sbbm"></sbbm>
        </div>
        <template #footer>
            <div>
                <el-button type="primary" size="small" @click="Onselect()">添加选择的数据</el-button>
                <el-button type="default" size="small" @click="model = false">点击关闭弹出框</el-button>
            </div>
        </template>
    </vol-box>
    <!-- 批量选择图片1 -->
    <vol-box :lazy="true" v-model="detailmodel" title="批量选择设备图片" :height="100" :width="1100" :padding="5"
        :onModelClose="onModelClose">

        <div>
            <xzsbtp ref="xzsbtp"> </xzsbtp>
        </div>
        <template #footer>
            <div>
                <el-button type="primary" size="small" @click="opnedetail()">选择设备图片</el-button>
                <el-button type="default" size="small" @click="detailmodel = false">点击关闭弹出框</el-button>
            </div>
        </template>
    </vol-box>

    <!-- 批量选择图片2 -->
    <vol-box :lazy="true" v-model="detailmodel2" title="批量选择设备图片" :height="100" :width="1100" :padding="5"
        :onModelClose="onModelClose">
        <div style="padding-bottom: 10px">
            <span style="margin-right: 20px">请选择数据</span>
            <el-input type="text" placeholder="图片一" style="width: 200px" v-model="sbtp1" />

            <el-button type="primary" plain style="margin-left: 10px" icon="Search" @click="search">搜索</el-button>
        </div>
        <div>
            <vol-table ref="fftable" :loadKey="true" :columns="columns" :pagination-hide="false" :height="200"
                :url="url" @loadBefore="loadTableBefore">
            </vol-table>




        </div>
        <template #footer>
            <div>
                <el-button type="primary" size="small" @click="detailselectClick()">选择设备图片</el-button>
                <el-button type="default" size="small" @click="detailmodel2 = false">点击关闭弹出框</el-button>
            </div>
        </template>
    </vol-box>

</template>
<script>
import VolBox from '@/components/basic/VolBox.vue';
import sbbm from '@/views/demo/mechanica/Mechanica.vue';
import xzsbtp from '@/views/demo/records2/Mechanica_records2.vue';
import Voltable from '@/components/basic/VolTable.vue';
//这里使用的vue2语法，也可以写成vue3语法
export default {
    components: {
        'vol-box': VolBox, sbbm,
        'vol-box': VolBox, xzsbtp,
        'vol-table': Voltable
    },
    methods: {},
    data() {
        return {
            model: false,
            detailmodel: false,
            detailmodel2: false,
            sbtp1: '',

            url: "api/Mechanica/getMechanica_Records2",
            columns: [{ field: 'id', title: 'id', type: 'int', width: 110, hidden: true, readonly: true, require: true, align: 'left' },
            { field: 'sbtp1', title: '图片1', type: 'string', width: 220, align: 'left', sort: true },
            { field: 'sbtp2', title: '图片2', type: 'string', width: 220, align: 'left' }
            ]
        };
    },
    methods: {
        open() {
            this.model = true;
        },
        opnedetail() {
            this.detailmodel = true;
        },
        opnedetail2() {
            this.detailmodel2 = true;
        },
        search() {
            this.$refs.fftable.load();

        },

        loadTableBefore(params) {
            //查询前，设置查询条件
            params.wheres = [
                { name: "sbtp1", value: this.sbtp1, displayType: "like" },
            ];
            return true;
        },

        Onselect() {
            var rows = this.$refs.sbbm.$refs.grid.getSelectRows();
            if (!rows || rows.length == 0) {
                return this.$message.error("请选择行数据");
            }
            //return this.$message.error(JSON.stringify(rows));
            //回写数据到表单


            this.$emit("parentCall", ($parent) => {
                //将选择的数据合并到表单中(注意框架生成的代码都是大写，后台自己写的接口是小写的)
                $parent.editFormFields.sbmc = rows[0].sbmc;
                $parent.editFormFields.sbbm = rows[0].sbbm;
                $parent.editFormFields.sbxh = rows[0].sbxh;
                $parent.editFormFields.sbtp = rows[0].sbtp;
                this.model = false;

            })
        },
        detailselectClick() {
            let rows = this.$refs.fftable.getSelected()
            if (!rows.length) {
                return this.$message.error("请选择数据")
            }

            let _rows = rows.map((row) => {
                return {

                    sbtp2: row.sbtp2

                };
            });
            this.$emit('parentCall', $parent => {
                $parent.$refs.detail.rowData.push(..._rows);
                this.detailmodel2 = false;
            })
        }
    }



};
</script>
